<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ userInfo.username }}</div>
    <UploadExcel
      :on-success="handleSuccess"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatExcelDate } from '@/utils/index.js'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'userInfo'
    ])
  },
  // 方法
  methods: {
    /**
     * results excel表格的内容
      // [
          {'姓名'：'小张'， '手机号': '13712345678'}
        , {.....}
        ]

      // 目标
      // [ {'username'：'小张'，'mobile': '13712345678'}, {.....} ]
     */
    // 把一个对象数组中的每个对象的属性名，从中文改成英文
    // 思路：对于原数组每个对象来说
    //    （1） 找出所有的中文key
    //     (2)  得到对应的英文key
    /** const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      } */
    transExcel(results, header) {
      const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
      const res = results.map(item => {
        // item => {'姓名'：'小张'， '手机号': '13712345678'}
        const zhKeys = Object.keys(item)
        // zhKeys => ['姓名','手机号']
        const obj = {}
        zhKeys.forEach(zhKey => {
          // zhKey => '姓名'
          const enKey = mapInfo[zhKey]
          // enKey => 'username'
          // 如果是日期格式,要做额外的处理
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            obj[enKey] = new Date(formatExcelDate(item[zhKey]))
          } else {
            obj[enKey] = item[zhKey]
          }
        })
        return obj
      })
      return res
    },
    handleSuccess({ results, header }) {
      // 1.读取数据
      console.log('excel读取出来的内容是', results, header)
      // 2.按接口文档的要求,把数据进行组装
      const data = this.transExcel(results, header)
      console.log(data)
      // 3.调用接口,传递数据
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
